<template>
    <div>
        <!-- 
        设置 router 属性为true，则表示 vue-router 形式操作菜单

        -->
        <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        default-active="/home"
        text-color="#f33"
        @open="handleOpen"
        @close="handleClose"
        :router="true"
        :collapse="bol"
      >

      <!-- 循环路由 -->
       <template v-for="item in root" :key="item.path">
        <template v-if="item.children">
            <el-sub-menu :index="item.path">
                <template #title>
                    <el-icon><component :is="item.meta.icon" /></el-icon>
                    <span>{{item.meta.tit}}</span>
                </template>

                <el-menu-item 
                v-for="aa in item.children" 
                :index="item.path+'/'+aa.path"
                :key="aa.path">
                <el-icon><component :is="item.meta.icon" /></el-icon>
                {{ aa.meta.tit }}</el-menu-item>

            </el-sub-menu>
        </template>
        <template v-else>
            <el-menu-item :index="item.path">
                <el-icon><component :is="item.meta.icon" /></el-icon>
                <span>{{item.meta.tit}}</span>
            </el-menu-item>
        </template>
       </template>
      </el-menu>
    </div>
</template>

<script setup lang="ts">
//导入设置的路由表
import { root } from '@/router'

defineProps(['bol'])

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped>

</style>